<template>
  <div>
    <van-nav-bar
      class="box"
      title="找房列表"
      left-arrow="true"
      @click-left="onClickLeft"
    />
    <van-image
      width="100%"
      height="252px"
      :src="`http://liufusong.top:8080` + info.houseImg[0]"
    />
    <div class="HouseDetail_info__w_ymp">
      <h3 class="HouseDetail_infoTitle__E1ASO">{{ info.community }}</h3>
      <div
        class="am-flexbox HouseDetail_tags__3VXf3 am-flexbox-align-center"
        :src="``"
      >
        <div class="am-flexbox-item">
          <span>{{ info.tags[0] }}</span>
        </div>
      </div>
      <div
        class="am-flexbox HouseDetail_infoPrice__3SZhW am-flexbox-align-center"
      >
        <div class="am-flexbox-item HouseDetail_infoPriceItem__Rxzot">
          {{ info.price }}
          <span class="HouseDetail_month__uBAXz">/月</span>
          <div>租金</div>
        </div>
        <div class="am-flexbox-item HouseDetail_infoPriceItem__Rxzot">
          {{ info.roomType }}
          <span class="HouseDetail_month__uBAXz"></span>
          <div>房型</div>
        </div>
        <div class="am-flexbox-item HouseDetail_infoPriceItem__Rxzot">
          {{ info.size }}
          <span class="HouseDetail_month__uBAXz">/平米</span>
          <div>面积</div>
        </div>
      </div>
      <div
        class="am-flexbox HouseDetail_infoBasic__3prns am-flexbox-align-start"
      >
        <div class="am-flexbox-item">
          <div>
            <span class="HouseDetail_title__iGpj_"> 装修： </span>
            {{ info.supporting.length > 5 ? 精装 : 简单 }}
          </div>
          <div>
            <span class="HouseDetail_title__iGpj_"> 楼层： </span>
            {{ info.floor }}
          </div>
        </div>
        <div class="am-flexbox-item">
          <div>
            <span class="HouseDetail_title__iGpj_"> 朝向： </span>
            {{ info.oriented[0] }}
          </div>
          <div>
            <span class="HouseDetail_title__iGpj_"> 类型： </span>
            {{ info.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="HouseDetail_map__21q54">
      <div class="HouseDetail_mapTitle__3reEo">
        小区：<span>{{ info.community }}</span>
      </div>
      <div id="index">
        <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" />
      </div>
    </div>
    <div class="HouseDetail_about__1W1Px">
      <div class="HouseDetail_houseTitle__3dg6k">房屋配套</div>
      <!-- <ul class="HousePackage_root__1MUw0"> -->
        <!-- <li class="HousePackage_item__2q4AQ">
          <p></p>
          {{ info.supporting.length > 1 ? info.supporting : '无' }}
        </li> -->
      <!-- </ul> -->
    </div>
    <div class="HouseDetail_set__26npJ">
      <div class="HouseDetail_houseTitle__3dg6k"></div>
      <div>
        <div class="HouseDetail_contact__O_lsw">
          <div class="HouseDetail_user__TZj3w">
            <img src="http://liufusong.top:8080/img/avatar.png" alt="" />
            <div class="HouseDetail_useInfo__FrBlz">
              <div>王女士</div>
              <div class="HouseDetail_userAuth__Xr6gY"><i></i>已认证房主</div>
            </div>
          </div>
          <span class="HouseDetail_userMsg__3mcRl">发消息</span>
        </div>
        <div class="HouseDetail_descText__2JsQA">
          1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
          2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
          3.人车分流，环境优美。
          4.精装两居室，居家生活方便，还有一个小书房，看房随时联系
        </div>
      </div>
    </div>
    <div class="HouseDetail_recommend__1L7WT">
      <div class="HouseDetail_houseTitle__3dg6k">猜你喜欢</div>
      <div class="HouseDetail_items__1nCaB">
        <ArticleItem
          v-for="item in info"
          :key="item.id"
          :info="item"
        ></ArticleItem>
      </div>
    </div>
    <van-tabbar>
      <van-tabbar-item>
        <img
          src="http://liufusong.top:8080/img/unstar.png"
          alt=""
          @click="getfang(info.houseCode)"
        />
        收藏</van-tabbar-item
      >
      <van-tabbar-item>在线咨询</van-tabbar-item>
      <van-tabbar-item class="myvan">电话预约</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { housesid, shouchang } from '@/api/user'

export default {
  name: 'collect_one',
  props: {},
  components: {},
  data () {
    return {
      info: [],
      data: {},
      center: { lng: 0, lat: 0 },
      zoom: 0
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    async getfang (pid) {
      const data = await shouchang(pid)
      console.log(data)
    },
    handler ({ BMap, map }) {
      // console.log(BMap, map)
      this.center.lng = 121.487899486
      this.center.lat = 31.24916171
      this.zoom = 15
    }
  },
  async created () {
    const data = await housesid(this.$route.query.id)
    console.log(data)
    this.info = data.body
    this.center.lng = data.coord.longitude
    this.center.lat = data.coord.latitude

    console.log(data)
  },

  mounted () {},
  watch: {},
  computed: {},
  filters: {}
}
</script>

<style scoped lang="less">
.box {
  position: fixed;
  width: 100%;
}
.HouseDetail_recommend__1L7WT {
  margin: 10px 0 0;
  padding: 0 15px;
  background: #fff;
  .HouseDetail_houseTitle__3dg6k {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #cecece;
  }
  .HouseDetail_items__1nCaB {
    height: 400px;
  }
}
.HouseDetail_set__26npJ {
  margin: 10px 0;
  padding: 0 10px;
  line-height: 150%;
  background: #fff;
  .HouseDetail_houseTitle__3dg6k {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #cecece;
  }
  .HouseDetail_contact__O_lsw {
    position: relative;
    .HouseDetail_user__TZj3w {
      margin-bottom: 10px;
      display: flex;
      img {
        width: 52px;
        height: 52px;
        margin: 10px 10px 0 0;
      }
      .HouseDetail_useInfo__FrBlz {
        padding: 15px 0 0 5px;
        .HouseDetail_userAuth__Xr6gY {
          font-size: 12px;
          color: #fa5741;
        }
      }
    }
    .HouseDetail_userMsg__3mcRl {
      position: absolute;
      right: 15px;
      top: 20px;
      color: #33be85;
      border: 1px solid #33be85;
      border-radius: 3px;
      padding: 3px 15px;
    }
  }
  .HouseDetail_descText__2JsQA {
    line-height: 1.6;
    padding: 10px 0;
    color: #333;
  }
}
.HouseDetail_about__1W1Px {
  margin-bottom: 10px;
  padding: 0 10px;
  background: #fff;
  .HouseDetail_houseTitle__3dg6k {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #cecece;
  }
  .HousePackage_root__1MUw0 {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    background: #fff;
    margin: 0;
    padding: 0;
    .HousePackage_item__2q4AQ {
      margin: 10px 0;
      width: 20%;
      line-height: 23px;
    }
  }
}
.HouseDetail_map__21q54 {
  margin-top: 10px;
  background: #fff;
  height: 189px;
  // background-color: aqua;
  .HouseDetail_mapTitle__3reEo {
    margin: 0 3%;
    line-height: 44px;
    color: #666;
    span {
      color: #333;
    }
  }
}
.map {
  width: 100%;
  height: 230px;
}
.van-tabbar-item {
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  color: #999;
  font-size: 17px;
  img {
    width: 16px;
    height: 16px;
  }
}
.myvan {
  border-right: 0;
  background-color: #21b97a;
  color: #fff;
}
.HouseDetail_info__w_ymp {
  padding: 15px;
  background: #fff;
  .HouseDetail_infoTitle__E1ASO {
    font-weight: 400;
    font-size: 16px;
    color: #333;
  }
  .HouseDetail_tags__3VXf3 {
    position: relative;
    margin: 10px 0;
    .am-flexbox-item {
      box-sizing: border-box;
      flex: 1 1;
      margin-left: 8px;
      min-width: 10px;
      span {
        background: #e1f5f8;
        display: inline-block;
        font-size: 12px;
        border-radius: 3px;
        padding: 4px 5px;
        margin-right: 5px;
        line-height: 12px;
      }
    }
  }
  .HouseDetail_infoPrice__3SZhW {
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    margin: 15px 0;
    padding: 15px 0;
    .am-flexbox-item {
      box-sizing: border-box;
      flex: 1 1;
      margin-left: 8px;
      min-width: 10px;
    }
    .HouseDetail_infoPriceItem__Rxzot {
      text-align: center;
      color: #fa5741;
      font-weight: 700;
      div:first-child {
        color: #fa5741;
        font-size: 18px;
      }
      div {
        font-weight: normal;
        color: #999;
        height: 26px;
        line-height: 26px;
        .HouseDetail_month__uBAXz {
          font-size: 12px;
          font-weight: 400;
        }
      }
    }
  }
  .am-flexbox.am-flexbox-align-start {
    align-items: flex-start;
  }
  .HouseDetail_infoBasic__3prns {
    font-size: 13px;
    .am-flexbox-item {
      box-sizing: border-box;
      flex: 1 1;
      margin-left: 8px;
      min-width: 10px;
      .HouseDetail_title__iGpj_ {
        display: inline-block;
        color: #999;
        padding-right: 5px;
        line-height: 26px;
      }
    }
  }
}
.am-flexbox {
  text-align: left;
  overflow: hidden;
  display: flex;
}
.am-flexbox.am-flexbox-align-center {
  align-items: center;
}
.pic {
  height: 252px;
  width: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
